<template>
	<view class="content">
		<view class="welcome">
			<view class="h1">你好,</view>
			<view class="h1">欢迎来到幻体空间</view>
		</view>
		<view class="PhoneBox">
			<view class="telInputBox matop20">
				<view class="add86">+86</view>
				<input class="telipt" maxlength="11" type="number" :value="inputValue0" placeholder="请输入手机号码 "
					@input="onPhoneInput" />
			</view>
			<view class="telInputBox matop20">
				<input class="telipt" maxlength="11" type="text" :value="inputValue2"
					placeholder="登录密码" @input="onPwdInput" />
			</view>
		</view>
		<view class="ubtns">
			<u-button style="margin: 150rpx 25rpx 0;width: 700rpx;" @click="API_login()" color="#302C29" shape="circle"
				text="绑定账号"></u-button>
		</view>
	</view>
</template>

<script> 

	export default {
		data() {
			return { 
				inputValue0: "15237820711",
				inputValue2:  "123456", 
			}
		},
		methods: {
			changeLoginType:function(){
				this.showWxLogin = !this.showWxLogin
			},
			onPhoneInput: function(event) {
				this.inputValue0 = event.target.value;
			},
			onPwdInput: function(event) {
				this.inputValue2 = event.target.value;
			},
			API_login() {
				var that = this;
				that.ran
					.request('/app-api/member/auth/login', {
						"mobile": that.inputValue0,
						"password": that.inputValue2,
					}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.setStorageSync('accessToken', res.data.accessToken);
							
							uni.setStorageSync('refreshToken', res.data
												.refreshToken);
							uni.setStorageSync('userId', res.data.userId);
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		/* background-image: linear-gradient(to bottom right, #e5e5e5, #f4f4f4); */
	}


	.changeLogin {
		margin: 150rpx 25rpx 0;
		width: 700rpx;
		text-align: center;
		color: #1e9bcc;
		border: #1e9bcc;
	}
	.ubtns {
		margin: 150rpx 25rpx 0;
		width: 700rpx;
	}

	.matop20 {
		margin-top: 30rpx;
	}

	.welcome {
		padding: 100rpx 50rpx 150rpx;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1.5;
		background-image: linear-gradient(to bottom right, #cacaca, #f4f4f4);


		.h1 {}
	}

	.PhoneBox {
		padding: 20upx 50upx;
		overflow: hidden;
		margin: auto;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -50rpx;
		background: #fff;

		.tel_tile {
			font-weight: bold;
			line-height: 100upx;
			font-size: 40upx;
		}

		.CodeInputBox {
			width: 650upx;
			overflow: hidden;
			background: #efefef;
			border-radius: 80upx;

			.codebtns {
				width: 250upx;
				line-height: 100upx;
				float: right;
				text-align: center;
				box-sizing: border-box;
				border-right: 1upx solid #eee;
			}

			.telipt {
				width: 310upx;
				padding: 10upx 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

		.telInputBox {
			width: 650upx;
			overflow: hidden;
			background: #efefef;
			border-radius: 80upx;
			padding: 10upx 0;

			.add86 {
				width: 100upx;
				line-height: 80upx;
				float: left;
				text-align: center;
				box-sizing: border-box;
				border-right: 1upx solid #eee;
			}

			.telipt {
				width: 460upx;
				padding: 0 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

		.getPhoneBtn {
			width: 600upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 10upx;
			text-align: center;
			color: #fff;
			background: blue;
			margin-top: 50upx;
		}
	}
</style>